<template>
	<view class="window">
		<text class="title">{{windowData.title}}</text>
		<text class="tel">{{windowData.tel ? ('订餐电话:' + windowData.tel) : ''}}</text>
		<scroll-view scroll-y=true class="window-content">
			<view class="window-item" v-for="(item,index) in windowData.list" :key="index">
				<image  class="window-img" :src="item.img" mode="aspectFill"></image>
				<view class="window-right">
					<view class="window-up">
						<text class="window-title">{{item.title}}</text>
						<text class="window-price">{{'￥'+item.price}}</text>
					</view>
					<view class="window-down">
						<view class="window-like" @tap="praiseFn(item)">
							<text :class="item.isLiked ? 'inxupt inxupttubiao5 item' : 'inxupt inxupttubiao4 item'">
							</text>
							<text>{{translation(item.likeNum)+"人点赞"}}</text>
						</view>
						<text class="window-token">{{item.token===null?"暂无优惠卷":item.token+"张优惠卷"}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {_ajax} from "../in-xupt-functions.js"
	export default {
		data() {
			return {
				
			};
		},
		props:{
			windowData:{
				default: undefined
			}
		},
		// computed:{
		// 	likeNum(e){
		// 		return this.translation(e)
		// 	}
		// },
		methods:{
			translation(e){
				if(e>9999){
					return (parseInt(e/1000)/10)+"W"
				}
				if(e>999){
					return (parseInt(e/100)/10)+"K"
				}
				return e
			},
			praiseFn(e){
				if(e.isLiked){
					e.likeNum--
					_ajax({
						url:`https://www.fastmock.site/mock/2c179a10bd6f56d8844d8cb2e3bb11a6/test/item/${e.id}/like`,
						methods:"DELETE",
						isMock:true
					}).then(res=>{
						console.log(res)
					})
				}else{
					e.likeNum++	
					_ajax({
						url:`https://www.fastmock.site/mock/2c179a10bd6f56d8844d8cb2e3bb11a6/test/item/${e.id}/like`,
						methods:"POST",
						isMock:true
					})
				}
				e.isLiked=!e.isLiked
			}
		}
	}
</script>

<style>

	.window{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
	}
	.window .title{
		font-size: 16px;
		margin-top: 10px;
		display: block;
		width: 100%;
		text-align: center;
	}
	.window .tel{
		color: #8a8a8a;
		font-size: 12px;
		margin: 5px 0;
		display: block;
		width: 100%;
		text-align: center;
	}
	.window .window-content{
		width: 100%;
		height: calc(100% - 60px);
	}
	.window .window-item{
		height: 100px;
		width: 100%;
		background-color: #fff;
		display: flex;
		margin: 10px 0;
		border-radius: 5px;
		overflow: hidden;
	}
	.window .window-img{
		height: 90px;
		width: 90px;
		margin: 5px;
		border-radius: 5px;
		overflow: hidden;
	}
	.window .window-right{
		width: calc(100% - 100px);
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;
		margin: 10rpx 0;
		margin-right: 30rpx;
	}
	.window .window-up{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.window .window-title{
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 10rpx;
	}
	.window .window-down{
		text-align: end;
	}
	.window-like{
		font-size: 12px;
		color: #7f7f7f;
	}
	.window .window-price{
		color: #F76B8A;
		font-weight: 600;
	}
	.window .window-token{
		font-size: 12px;
		color: #7f7f7f;
	}
</style>
